<template>
  <TabContainer  >
    <table style="width: 100%">
      <thead>
        <tr class="row">
          <th class="col-3">Task</th>
          <th class="col-3">Last Replacement</th>
          <th class="col-3">Next Replacement</th>
          <th class="col-3"></th>
        </tr>
      </thead>
      <hr />
      <tbody>
        {{
          'CTC010'
        }}
        <tr
          v-for="(item, index) in filterRows"
          :key="index"
          class="cursor-pointer row"
          :class="getStatusColor(item.status)"
          style="text-align: center"
        >
          <td class="col-3">{{ item.stock_code }}</td>
          <td class="col-3">{{ item.serial_number }}</td>
          <td class="col-3">{{ item.serial_number }}</td>
          <td class="col-3">
            <q-checkbox dense v-model="isComplete" label="" color="primary" />
          </td>
        </tr>
      </tbody>
    </table>
  </TabContainer>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { getStatusColor } from 'src/utils/getPublic';
import TabContainer from '../container/TabContainer.vue';

const isComplete = ref(true);

const data = [
  {
    id: 1,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'danger',
  },
  {
    id: 2,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  { id: 3, stock_code: '681700085', serial_number: 'SN12345', status: 'dos' },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
  {
    id: 3,
    stock_code: '681700085',
    serial_number: 'SN12345',
    status: 'missing',
  },
];

const rows = ref(data);
const filterRows = computed(() => {
  return rows.value;
});

</script>
<style scoped>
table {
  border-collapse: collapse;
  table-layout: fixed;
}

td {
  padding: 0.5rem;
}
</style>
